Для надання інтерфейсу програми привабливості до неї можна додавати зображення із зовнішніх файлів.

58.1.

СТВОРЕННЯ ПОЛОТНА

Для додавання файла зображення у графічному вікні необхідно створити полотно для малювання Canvas. Загальна структура коду для створення полотна має вигляд:

В якості властивостей указують ім’я змінної, яка приймає значення графічного вікна, можна також указати ширину та висоту полотна. Для розташування полотна у графічному вікні, як і для інших елементів керування, використовують методи pack або place.

Розглянемо приклад коду створення полотна:

З допомогою цього коду буде створено графічне вікно, в якому розташовується полотно Canvas, розміщене відносно графічного вікна, починаючи з координат (20, 20) шириною 100 пікселів та висотою 80 пікселів (рис. 58.1).

Звичайно, при запуску даної програми на виконання ми не побачимо ніяких змін у графічному вікні. Зміни будуть видні тоді, коли в цьому полотні буде розміщено деяке зображення.

58.2.

ДОДАВАННЯ ЗОБРАЖЕННЯ

Для завантаження до полотна зображення файла використовують конструктор Photoimage. Загальний синтаксис коду буде таким:

Однією з основних властивостей даного конструктора є file, що містить адресу файла, який необхідно завантажити. Якщо файл міститься у тій же папці, що і файл програми, вказують лише ім’я файла, якщо в іншій папці — слід указати шлях до цієї папки. Наприклад,

Але для розташування цього файла у графічному вікні необхідною є ще функція canvas.create_image. Наприклад,

Тут canvas.createjmage — функція виведення зображення;

0, 0 — координати зображення по осі х та у відносно полотна Canvas;

image=img — указує ім’я змінної, до якої завантажено зображення; anchor — параметр, що визначає, до якої точки полотна прив’язується зображення. Значення NW — скорочено North West, що в перекладі означає «північний захід», указує на прив’язку зображення до верхнього лівого кута полотна.

Звичайно, атрибут anchor може набувати й інших значень. На рис. 58.2 представлено його можливі значення та відповідні точки прив’язки.

За умовчанням anchor має значення CENTER, отже, якщо цей атрибут у команді пропущений — це означає прив’язку до центра.

Більш детально додавання зображень у графічному вікні розглянемо, виконавши вправу.

ВПРАВА 58

Завдання. Створити програму, в якій при завантаженні відображаються назви тварин. При наведенні на назву тварини з’являється її зображення. При клацанні на назву тварини — виводиться вікно повідомлення з інформацією про цю тварину. Також дане вікно програми має містити власну піктограму, розміщену в рядку заголовка (рис. 58.3).

Створення інтерфейсу програми

1. Створіть графічне вікно із заголовком Зоопарк та з розмірами 350x240.

2. Додайте команди створення написів, що мають містити відповідні назви тварин, розмір шрифту— 16 пт. та зелений колір фону (рис. 58.3).

3. Додайте команду mainloop().

Додавання зображень

4. Розташуйте необхідні для програми файли зображень у папці з програмою (це мають бути зображення панди, жирафи, зебри, лева та бегемота). їх ви можете завантажити з папки до даного уроку.

5. Додайте команду: Window.iconbitmap(¹ panda .ico'). Тут iconbitmap — метод установлення іконки у рядку заголовка, panda.ico — ім’я файла зображення.

6. Додайте команди створення графічного полотна.

7. Створіть обробник події, що має відбуватися в разі наведення на напис L1, що має значення жирафа:

Перший рядок — заголовок функції. Оскільки подія відбувається не при натисненні на деяку кнопку, в якості аргумента функції використовується службове слово event — подія. У другому рядку оголошено в якості глобальної змінну img, що буде мати значення зображення. У третьому рядку створено зображення з допомогою конструктора Photoimage. В якості аргументу вказано ім’я файла 'giraffe, png'. В останньому рядку вказано місце розташування зображення на полотні.

8. Для виклику обробника події наведення на напис L1 додайте наступну команду:

Тут L1 — напис, на який необхідно навести курсор миші; Motion — подія наведення курсору миші; L1_mot — ім’я обробника події.

9. Запустіть програму. Наведіть курсор на напис Жирафа. В результаті має з’явитися зображення жирафи.

10. Самостійно додайте обробники подій для наведення курсору на інші написи. А також додайте команди виклику цих обробників подій.

11. Уведіть обробник події клацання на написі, що має призвести до появи вікна повідомлення з інформацією про жирафу:

12. Для виклику даного обробника події додайте команду:

13. Запустіть програму. Клацніть на написі. В результаті має з’явитися вікно повідомлення з інформацією про жирафу.

14. Самостійно додайте обробники подій клацання курсору на інші написи. А також додайте команди виклику цих обробників подій (інформацію про інших тварин відшукайте в мережі Інтернет).

Контрольні запитання та завдання

1. Як змінити піктограму заголовка вікна?

2. Що необхідно для розташування зображення у графічному вікні?

3. Що таке полотно?

4. Як завантажити зображення до полотна?

5. Для чого використовується параметр anchor?

6. Де мають розташовуватися файли зображень, що відображаються у графічному вікні?

Питання для роздумів

1*. Чи можна при додаванні зображень не вказувати параметр anchor?

Завдання для досліджень

1*. Дослідіть, які типи файлів зображень можна додавати до графічного вікна.

2*. Відшукайте інформацію про те, як до графічного вікна додати графічні примітиви (відрізки, кола, прямокутники тощо).

 

Це матеріал з підручника Інформатика 8 клас Казанцева, Стеценко (2021)